<template>
  <div id="cart-info">
    <!-- -----购物车为空的内容----- -->
    <div class="shop-null" v-if="isShow">
      <h1 align="center">购物车为空</h1>
    </div>
    <!-- -----购物车有数据的内容----- -->
    <div class="shop-data" v-else>
      <!-- ----------用户信息及收获地址----------- -->
      <div class="shop-address">
        <p>
          <span>收货人: {{user.name}}</span>  
          <span>{{user.tel}}</span>
          <span>&gt;</span>
        </p>
        <p>
          <span>收货地址:{{user.address}}</span>
        </p>   
      </div>
      <img src="../../assets/img/cart_border@2x.png" alt="">
      <!-- -----------商品列表----------- -->
      <ul class="cart-item">
        <li v-for="(item,index) in cartList" :key="index">
          <div class="check-box">
            <van-checkbox 
            v-model="item.isChecked" checked-color="#ee0a24" 
            @click="itemCheckChange"
            ></van-checkbox>
          </div>
          <div class="cart-item-info">
            <img :src="item.shop_img" alt="">
            <div class="item-info-right">
              <p>{{item.shop_name}}</p>
              <p>
                <span class="item-price">￥{{item.shop_price.toFixed(2)}}</span>
                <button @click="shopJian(index)">-</button>
                <span>{{item.shop_num}}</span>
                <button @click="shopJia(index)">+</button>
              </p>
            </div>
          </div>
        </li>
      </ul>
      <!-- ----------提交菜单------------- -->
      <van-submit-bar :price="allPrice * 100" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="checked" @click="checkChange">全选</van-checkbox>
      </van-submit-bar>

      <van-dialog v-model="show" :show-confirm-button="false">
        <p>
          <title-bar bg_color="#fff" font_color="#333">
            <p slot="left" @click="hidePay">X</p>
            <h3 slot="center">支付</h3>
            <p slot="right">使用密码</p>
          </title-bar>
        </p>
        <div align="center"  class="pay-price">
          <h4>北京工商管理专修学院</h4>
          <h2>￥{{allPrice.toFixed(2)}}</h2>
        </div>
        <ul class="pay-type">
          <li 
          v-for="(item,index) in payType" 
          :key="index" 
          :class="{'pay-active':currentIndex == index ? true : false}"
          @click="changeList(index)"
          >{{item}}</li>
        </ul>
        <van-button type="primary">支付</van-button>
      </van-dialog>
    </div>   
  </div>
</template>

<script>
import Vue from 'vue';
import { Checkbox, CheckboxGroup, Dialog, SubmitBar, Button } from 'vant';
import "vant/lib/checkbox/style"
import "vant/lib/checkbox-group/style"
import 'vant/lib/dialog/style'
import 'vant/lib/submit-bar/style'
import 'vant/lib/button/style'
import TitleBar from '../../../../../day17/yougou/src/components/common/title_bar/TitleBar.vue';
Vue.use(Checkbox);
Vue.use(Button);
Vue.use(Dialog);
Vue.use(SubmitBar);
Vue.use(CheckboxGroup);
export default {
  components: { TitleBar },
  name:"CartInfo",
  data() {
    return {
      isShow:false, //空购物车与有数据购物车的切换
      user:{  // 当前用户信息
        name:"张三",
        tel:13112345678,
        address:"北京市昌平区南口镇南大街21号"
      },
      cartList:[], //购物车商品数据
      checked:true, //全选按钮的状态
      show:false, //购买窗口的显示与隐藏
      payType:[
        "零钱",
        "微信支付",
        "支付宝支付",
        "银行卡支付"
      ],
      currentIndex:0
    }
  },
  created() {
    // 获取购物车数据，实现购物车内容的显示
    let a = localStorage.getItem("shopcart");
    a = a == null ? [] : JSON.parse(a);
    this.cartList = a
    if(a.length == 0) {
      this.isShow = true
    }else{
      this.isShow = false
    }

  },
  computed:{
    // 计算总价
    allPrice(){
      return this.cartList.reduce((s,item)=>{
        if(item.isChecked){
          s += item.shop_price * item.shop_num
        }
        return s
      },0)
    }
  },
  methods:{
    // 商品数量递减函数
    shopJian(index){
      if(this.cartList[index].shop_num == 1){
        Dialog.confirm({
          title: '是否从购物车中移出该商品',
          message: '',
        })
        .then((b) => {
          this.cartList.splice(index,1)
           localStorage.setItem('shopcart',JSON.stringify(this.cartList))
        })
        .catch((e)=>{})
      }else{
        this.cartList[index].shop_num--
        localStorage.setItem('shopcart',JSON.stringify(this.cartList))
      }
      
    },
    // 商品数量增加函数
    shopJia(index){
      this.cartList[index].shop_num++;
      localStorage.setItem('shopcart',JSON.stringify(this.cartList))
    },
    // 购买按钮的提交函数
    onSubmit(){
      this.show = true
    },
    // 全选按钮的点击事件函数
    checkChange(){
      console.log(this.checked)
      if(this.checked){
        this.cartList.forEach(item => {
          item.isChecked = true
        });
      }else{
         this.cartList.forEach(item => {
          item.isChecked = false
        });
      }
    },
    // 商品复选框点击事件函数
    itemCheckChange(){
      var boo = this.cartList.every(item => item.isChecked)
      if(boo){
        this.checked = true
      }else{
        this.checked = false
      }
    },
    // 隐藏支付窗口
    hidePay(){
      this.show = false
    },
    changeList(i){
      this.currentIndex = i
    }
  }
}
</script>

<style scoped>
  .shop-address{
    padding: 5px 10px;
    font-size: 18px;
    line-height: 42px;
  }
  .shop-address p:first-of-type span:first-of-type{
    margin-right: 100px;
  }
  .shop-address p:first-of-type span:last-of-type{
    margin-left: 20px;
  }
  img{
    width: 100vw;
  }
  li{
    display: flex;
  }
  .check-box{
    width: 40px;
    text-align: center;
  }
  .cart-item-info{
    flex: 1;
    display: flex;
  }
  .cart-item-info img{
    width: 100px;
    margin-right: 10px;
  }
  .item-info-right{
    flex: 1;
  }
  .van-checkbox{
    justify-content: center;  
    align-items: center; 
    height: 100%;
  }
  .item-info-right p{
    margin-bottom: 10px;
  }
  .item-price{
    margin-right: 50px;
  }
  .item-info-right button{
    width: 25px;
    margin: 0 5px;
  }
  .van-submit-bar{
    bottom: 55px;
  }
  .cart-item{
    height: calc(100vh - 60px - 94px - 105px - 8px);
    overflow: auto;
  }
  #title-bar .right p{
    width: 100px;
    margin-left:-60px ;
    color: cornflowerblue;
  }
  .pay-price{
    border-top:1px solid #ccc ;
    border-bottom:1px solid #ccc;
    /* margin: 10px 0; */
    padding: 20px 0;
  }
  .pay-price h4{
    margin-bottom: 10px;
  }
  .pay-type li{
    text-align: center;
    line-height: 36px;
    display: block;
    border-bottom: 1px solid #ccc;
  }
  .van-dialog__content .van-button--normal{
    display: block;
    margin: 10px auto;
    width: 90%;
    border-radius: 10px;
  }
  .pay-active{
    background: #ddd;
  }
</style>